/* pages/index/goods/goodsDetail/goodsDetail.wxss */
// 右箭头字体图标
@font-face {
    font-family: 'iconfont';
    src: url('iconfont.eot');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'iconfont';
    src: url(data:application/font-woff2;charset=utf-8;base64,d09GMgABAAAAAAKAAA0AAAAABlwAAAIuAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP0ZGVE0cGh4GVgCCQhEICkhdCwoAATYCJAMQBCAFhQgHNRt9BcieA27LDKcTuloffo8uoc7DyyVFKB6e399/a5+7P4TkUH9jxSBZeUKCs9AmdNepbkJynOfXL93btG7jvkvpSBRdqCavt73MoDhUTtKNwQmEY7Ah/6UHaqx+4mZam2hybmsSd9G2KA4DigJMp41t4U/gtwf7d33j350r2UHt2+VSiEvJQSkcjl0mIeDF/UkLeNv+Pzqb0Ip+UIRKJSQKIsUVdZSz5Tm4DK+PH06iRVFXIdfagWsdZ5+7ta2iVtjGgMsQgAoVRhFYUBUYVTMJUgo+dwNrhn4iIOoJQBQg7uchqOeKGgUkaESgBwwBSABEj6+vq9cGHu6/nh+c77v7LHpvP56U4ihv749QUo5H48N/5WBpv/AABIJ3D/8cabiwsZt6p2co1HKz3ECjAoJ2/w0Jyk0BAMgEJFLsRkg9CBQ0a0YNQLdfBOizRCA02oxA0eA4ApVGpwVIje4KUKfFMwTqNXqHQLP5uECgRU98qUQ2YQ4cETpdEEW77USlUw4m+kLU6fdN1Ov0QzTb6r+6xVSEOhalDApmpk5QPbIdmkjILGAdmi/Z3EThBM+TRVnwdwMbDJacT5GCXFnc8PiGvZUhlXGiws7aFjad7Lv1NhVczQ8Z0jqPZPYsJxgzCaZUJCDc5PiEweeLCLFUxGXQsDWcyZ3Z3jphNncj7iGUW1Ek6dz3AYcwFju1sWEWjq5pIgGsrqaZzM1+ecyk0YxdiVCiNJ86mbvOLxVaDg==) format('woff2'),
        url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAARAAA0AAAAABlwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAEJAAAABoAAAAcicHM9UdERUYAAAQEAAAAHgAAAB4AKQAKT1MvMgAAAaQAAABCAAAAVjyASARjbWFwAAAB+AAAAD4AAAFCAA/pvWdhc3AAAAP8AAAACAAAAAj//wADZ2x5ZgAAAkQAAABIAAAASJkW7zFoZWFkAAABMAAAADEAAAA2Fzrp6GhoZWEAAAFkAAAAHQAAACQGfAOFaG10eAAAAegAAAAQAAAAEAwAAWFsb2NhAAACOAAAAAoAAAAKACQAAG1heHAAAAGEAAAAHwAAACABDwAfbmFtZQAAAowAAAFJAAACiCnmEVVwb3N0AAAD2AAAACMAAAA1RvbpVHjaY2BkYGAA4p0/D+6N57f5ysDNwgACt/gufYPRjIkMSUzzmOYCuRwMTCBRAG+EDE4AAAB42mNgZGBgbvjfwBDDwgACTPMYGBlQAQsAUpwDCQAAAHjaY2BkYGBgYRBmANEMDExAzAWEDAz/wXwGAAqoAS8AeNpjYGRhYJzAwMrAwNTJdIaBgaEfQjO+ZjBi5ACKMrAyM2AFAWmuKQwOz4SeCTE3/G9giGFuYGgACjOC5ADdjQv/AAAEAAAAAAAAAAQAAAAEAAFheNpjYGBgZoBgGQZGBhCwAfIYwXwWBgUgzQKEQP4zof//IaTkR6hKBkY2BhiTgZEJSDAxoAJGhmEPAFAHB7IAAAAAAAAAAAAAACQAAAABAWEAYgKeAp0AEgAAJS4CNj8BJyY0NjIXARYUBwMGAYAJDwcEBurqCRIZCQD/CQn/CWIBChERB+rqCRkRCP8ACRgJ/wAIAHjafZA9TgMxEIWf8wckEkIgqF1RANr8lCkTKfQIpaNINt6QaNdeeZ1IOQEtFQeg5RgcgBsg0XIKXpZJkyJr7ejzm5nnsQGc4xsK/98l7oQVjvEoXMERMuEq9RfhGvlduI4WPoUb1H+Em7hVA+EWLtQbHVTthLub0m3LCmcYCFdwiifhKvWVcI38KlzHFT6EG9S/hJsY41e4hWtlqQzhYTBBYJxBY4oN4wIxHCySMgbWoTn0ZhLMTE83ehE7mzgbKO9XYpcDHmg554Ap7T23Zr5KJ/5gy4HUmG4eBUu2KY0uInQoG18snNXdqHOw/Z7ttrTYv2uBNcfsUQ1s1Pw92zPSSGwMr5CSNfIyt6QSU49oa6zxu2cp1vNeCIlOvMv0iMeaNHU6925p4sDi5/KMHH20uZI996gcPmNZCHm/3U7EIIpdhj+T2HEZAAAAeNpjYGKAAC4wyciADljAokyMTFyV+aVZmYl5JfmlABt7BHkAAAAAAf//AAIAAQAAAAwAAAAWAAAAAgABAAMAAwABAAQAAAACAAAAAHjaY2BgYGQAgqtL1DlA9C2+S99gNABCIwcKAAA=) format('woff'),
        url('iconfont.ttf') format('truetype'),
        url('iconfont.svg#iconfont') format('svg');
    font-weight: normal;
    font-style: normal;
}
.iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  .icon-youjiantou:before {
    content: "\e612";
  }
// 商品主要图片的展示
.goods_detail_img{
    width: 100%;
    margin-bottom: 20rpx;
}
// 商品信息区域
.goods_detail_msg{
    padding: 20rpx;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    .goods_detail_title{
        font-size: 28rpx;
        color: #333333;
        width: 80%;
    }
    .goods_money{
        color:#FF0060;
        font-size: 34rpx;
        margin: 10rpx 0;
        font-weight: bold;
    }
    .goods_detail_msg_info{
        font-size: 24rpx;
        line-height: 41rpx;
        color: #999999;
        display: flex;
        justify-content: space-between;
    }
}
// 领取优惠券红包区域
.coupon{
    margin-top: 10rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 88rpx;
    width: 100%;
    color: #999999;
    font-size: 24rpx;
    .coupon_left{
        display: flex;
        text{
            margin-right: 30rpx;
            font-size: 28rpx;
        }
        view{
            display: flex;
            align-items: center;
            color: #333333;
        }
    }
    .coupon_right{
        display: flex;
        align-items: center;
    }
}
/// 选择规格区域
.choose{
    margin-top: 10rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 88rpx;
    width: 100%;
    color: #999999;
    font-size: 24rpx;
    .choose_left{
        display: flex;
        text{
            margin-right: 30rpx;
            font-size: 28rpx;
        }
        view{
            display: flex;
            align-items: center;
            color: #333333;
        }
    }
    .choose_right{
        display: flex;
        align-items: center;
    }
}
// 商品详情
.goods_detail_img{
    width: 100%;
    height: 70rpx;
    background-color:#DDDDDD;
    color: #333333;
    line-height: 70rpx;
    text-align: center;
    margin: 0;
}
// 后面的图片区域
.img_goods{
    width: 100%;
    &:nth-last-of-type(1){
        margin-bottom: 110rpx;
    }
}
// 固定在最下方的购买信息
.goods_pay_for{
    width: 100%;
    height: 100rpx;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #fff;
    border-top: 1rpx solid #DDDDDD;
    z-index: 200;
    .kefu,.shopping_car{
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 22rpx;
        color: #666;
        position: relative;
        image{
            width: 35rpx;
            margin-bottom: 10rpx;
        }
        // 进入客服会话的button 取消他的默认样式
        button{
            background-color: rgba(0, 0, 0, 0);
            border-radius:0;
            position: absolute;
            left: 0;
            top: 0;
            width: 70rpx;
            height: 100rpx;
        }
        button::after {
            border: none;
          }
    }
    .shopping_car{
        image{
            width: 37rpx;
        }
    }
    // 加入购物车的按钮
    .add_shopping_car,.pay_for{
        height: 80rpx;
        width: 210rpx;
        color: #FF0060;
        border: 1rpx solid #FF0060;
        border-radius: 40rpx;
        text-align: center;
        line-height: 80rpx;
        font-size: 28rpx;
        box-sizing: border-box;
    }
    .pay_for{
        background-color:#FF0060;
        color: #fff;
    }
}
// 点击弹出黑色背景
.black_sheet{
    background-color: rgba(0, 0, 0, .21);
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
}
// 选择规格弹出层
.choose_info{
    position: fixed;
    left: 0;
    bottom: 100rpx;
    background-color: #fff;
    width: 100%;
    padding: 30rpx;
    box-sizing: border-box;
    height: 600rpx;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    font-size: 28rpx;
    color: #333333;
    .choose_info_title{
        width: 80%;
        line-height: 50rpx;
    }
    // 颜色区域
    .choose_info_color{
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 140rpx;
        border-bottom: 1rpx solid #DBDBDB;
        .choose_info_color_confirm{
            margin-top: 20rpx;
            display: flex;
            text{
                width: 100rpx;
                height: 44rpx;
                text-align: center;
                line-height: 44rpx;
                color: #333333;
                border-radius: 22rpx;
                border: 1rpx solid #ccc;
                margin-left: 20rpx;
                &:nth-of-type(1){
                    margin-left: 0;
                }
            }
            .active{
                color: #fff;
                background-color: #FF0060;
            }
        }
    }
    // 尺码区域
    .choose_info_size{
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 140rpx;
        border-bottom: 1rpx solid #DBDBDB;
        .choose_info_size_confirm{
            margin-top: 20rpx;
            display: flex;
            text{
                width: 50rpx;
                height: 50rpx;
                text-align: center;
                line-height: 50rpx;
                color: #FF0060;
                border-radius: 25rpx;
                border: 1rpx solid #FF0060;
                margin-left: 20rpx;
                &:nth-of-type(1){
                    margin-left: 0;
                }
            }
            .active{
                color: #fff;
                background-color: #FF0060;
            }
        }
    }
    // 数量区域
    .choose_info_num{
        display: flex;
        justify-content: space-between;
    }
    // 删除按钮和商品添加
    .last_btn_area{
        display: flex;
        // 增加减少按钮实现
        .add_min{
            display: flex;
            width: 120rpx;
            height:40rpx ;
            border-radius: 20rpx;
            justify-content: space-between;
            align-items: center;
            border: 1rpx solid #E5E5E5;
            image{
                width: 16rpx;
                margin: 0 auto;
            }
            input{
                // min-width:40rpx;
                width: 40rpx;
                border-left: 1rpx solid #E5E5E5;
                border-right: 1rpx solid #E5E5E5;
                text-align: center;
                font-size: 22rpx;
                color: #333333;
            }
        }

    }
}
// 红包的弹出层，因为没有设计图只能给出一个样子没有内容
.red_bag{
    width: 100%;
    height: 800rpx;
    position: fixed;
    background-color: #fff;
    left: 0;
    bottom: 0;
    z-index: 400;
    text-align: center;
}